<template>
  <div class="home">
 <div class="recommend">推荐歌单</div>
    <van-row gutter="10">
      <van-col span="8" v-for="item in songList" :key="item.id">
       <van-image
        width="100%"
        height="100"
        src="item.picUrl"
      />
      <p class="desc">{{ item.name }}</p>
      </van-col>
    </van-row>
     <div class="recommend">最新音乐</div>
     <MusicItem
      v-for="item in newList"
      :key="item.id"
      :name="item.name"
      :authorName="item.song.artists[0].name"
      :id="item.id"
       />

  </div>
</template>

<script>
// 记得加花括号
import { getSongList, getNewSongList } from '@/api/recommend.js'
import MusicItem from '@/components/MusicItem.vue'
export default {
  data () {
    return {
      songList: [],
      newList: []
    }
  },

  created () {
    this.getPersonalized()
    this.getNewMusic()
  },
  components: {
    MusicItem
  },
  methods: {
  // 获取歌单数据
    async getPersonalized () {
      const res = await getSongList({
        limit: 6
      })
      this.songList = res.data.result
    },
    // 获取新音乐
    async getNewMusic () {
      const res = await getNewSongList({
        limit: 20
      })
      this.newList = res.data.result
    }
  }
}
</script>

<style scoped>
.recommend {
  height: 40px;
  line-height: 40px;
  padding: 0 8px;
  font-size: 14px;
  background-color: yellowgreen;
  color: #fff;
}
.desc {
  font-size: 13px;
  padding: 5px;
}
</style>
